<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进行中</title>
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
            color: #555555;
            animation-duration: 1s;
        }

        .detail {
            padding: 40px;
            min-height: 300px;
            height: fit-content;
            font-size: 24px;
            letter-spacing: 3px;
            line-height: 30px;
            display: flex;
            text-align: center;
        }

        .choice {
            width: 710px;
        }

        .score {
            width: 440px;
        }

        .no {
            width: 320px;
        }

        .list {
            font-size: 24px;
            text-align: center;
            padding-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="display: flex;">
        <div style="width: 20%;min-height: 40px; margin: auto;">
            <div @click="shiftRefresh" @mouseenter="menter" @mouseleave="mleave" class="xButton" style="float: right;"
                 v-if="!stoppedflag">
                <div class="centerText">{{text.started}}</div>
            </div>
        </div>
        <header :class="{xHeader:true}" id="head" style="width: 60%;">
            {{head}}
        </header>
        <div style="width: 20%; min-height: 40px; margin: auto;">
            <div @click="stop" @mouseenter="menter" @mouseleave="mleave" class="xButton" style="float: left;">
                <div class="centerText" id="stop_button">停止本轮投票</div>
            </div>
        </div>
    </div>
    <div class="xTurn detail" style="display: flex;">
        <div class="no">
            <div class="listHeader">
                名次
            </div>
            <div class="list">
                <!--suppress JSUnusedLocalSymbols -->
                <div v-for="(item, index) in choices">
                    第{{index + 1}}名
                </div>
            </div>
        </div>
        <div class="choice">
            <div class="listHeader">
                选手
            </div>
            <div class="list">
                <div v-for="(item) in choices">
                    {{item.choice}}
                </div>
            </div>
        </div>
        <div class="score">
            <div class="listHeader">
                得票
            </div>
            <div class="list">
                <!--suppress JSUnresolvedVariable -->
                <div v-for="(item) in choices">
                    {{item.score}}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            head: "正在投票, 很期待结果怎样.",
            ballotId: null,
            css: {
                mleavecolor: "#555555",
                mentercolor: "#3a3f4d",
            },
            text: {
                stopped: "继续刷新",
                started: "暂停刷新",
                stoppedHead: "这是投票的结果.",
                unknownErr: "未知错误, 请重新登录或联系管理员",
                loginAlert: "状态错误, 请重新登录"
            },
            refreshIntervalId: null,
            axPost: null,
            axGet: null,
            choices: [],
            stoppedflag: false
        },
        methods: {
            stringify: function (obj) {
                let res = "";
                for (let pro in obj) { // noinspection JSUnfilteredForInLoop
                    res += "&" + pro + "=" + obj[pro];
                }
                return res.substr(1);
            },
            getUrlParam: function (name) {
                const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                const r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            compare: function (prop) {
                return function (obj1, obj2) {
                    let val1 = obj1[prop];
                    let val2 = obj2[prop];
                    if (val1 < val2) {
                        return 1;
                    } else if (val1 > val2) {
                        return -1;
                    } else {
                        return 0;
                    }
                }
            },
            startRefresh: function () {
                if (this.refreshIntervalId != null) return;
                this.refreshIntervalId = setInterval(() => {
                    this.axGet
                        .get("/ballot/status", {
                            params: {}
                        })
                        .then(resp => {
                            if (resp.data.status === false) {
                                if (resp.data.value === "login") {
                                    alert(this.text.loginAlert);
                                    window.location.href = "index.html";
                                    return;
                                }
                                this.head = this.text.unknownErr;
                                return;
                            }
                            // noinspection JSUnresolvedVariable
                            this.choices = resp.data.value.chos;
                            this.choices.sort(this.compare("score"));
                            this.stoppedflag = resp.data.value.end;
                            if (this.stoppedflag === true) {
                                document.getElementById("stop_button").innerHTML = "返回工作台";
                                this.head = this.text.stoppedHead;
                            }
                        })
                        .catch(() => {
                            this.head = "数据请求似乎出错了, 请刷新页面重试或检查网络";
                        });
                }, 1500);
            },
            stopRefresh: function () {
                clearInterval(this.refreshIntervalId);
                this.refreshIntervalId = null;
            },
            menter: function (obj) {
                obj.currentTarget.style.backgroundColor = this.css.mentercolor;
            },
            mleave: function (obj) {
                obj.currentTarget.style.backgroundColor = this.css.mleavecolor;
            },
            shiftRefresh: function (obj) {
                if (this.refreshIntervalId === null) {
                    this.startRefresh();
                    obj.currentTarget.firstChild.innerHTML = this.text.started;
                } else {
                    this.stopRefresh();
                    obj.currentTarget.firstChild.innerHTML = this.text.stopped;
                }
            },
            stop: function (cur) {
                if (this.stoppedflag) {
                    window.location.href = "workbench.html";
                }
                this.axPost
                    .post("/turn/stop", this.stringify({
                            id: this.ballotId
                        }), {
                            headers: {'Content-Type': 'application/x-www-form-urlencoded',}
                        }
                    )
                    .then(resp => {
                        if (resp.data.status === false) {
                            if (resp.data.value === "login") {
                                alert("状态错误, 请重新登录");
                                window.location.href = "index.html";
                                return;
                            }
                            this.head = this.text.unknownErr;
                            return;
                        }
                        this.stoppedflag = true;
                        this.stopRefresh();
                        this.head = this.text.stoppedHead;
                        cur.currentTarget.firstChild.innerHTML = "返回工作台";
                    })
                    .catch(() => {
                        this.head = this.text.unknownErr;
                    })
            }
        },
        created: function () {
            this.ballotId = this.getUrlParam("id");
            this.axGet = axios.create({
                url: "https://"+window.location.host,
                method: "get",
                responseType: 'json'
            });
            this.axPost = axios.create({
                url: "https://"+window.location.host,
                method: "post",
                responseType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
            this.axGet
                .get("/captcha/login", {
                    params: {}
                })
                .then(resp => {
                    if (resp.data.status === false) {
                        alert(this.text.loginAlert)
                        window.location.href = "index.html";
                    }
                })
                .catch(() => {
                    window.location.href = "index.html";
                });
            this.shiftRefresh();
        }
    });
</script>
</body>
</html>
